<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<%@include file="/WEB-INF/jsp/public/commons.jspf"%>
</head>
<body>
	<div class="container" style="margin-top:20px;width:1022px;">
	<div class="page-header">
	   <h1>
	      <small style="float: left;">用户注册</small>
	      <h4 style="margin-left: 40%;color: red;">${myinfo }</h4>
	   </h1>
	</div>
	<form role="form" id="forumForm" action="user_regist.action" method="post" enctype="multipart/form-data">
	   <div class="form-group">
	      <label for="loginName">用户名</label>
	      <input type="text" class="form-control" id="loginName" name="loginName"
	         placeholder="请输入用户名">
	   </div>
	   <div class="form-group">
	      <label for="name">昵称</label>
	      <input type="text" class="form-control" id="name" name="name"
	         placeholder="请输入昵称">
	   </div>
	   <div class="form-group">
	      <label for="realName">真实姓名</label>
	      <input type="text" class="form-control" id="realName" name="realName"
	         placeholder="请输入真实姓名">
	   </div>
	   <div class="form-group">
	      <label for="password">密码</label>
	      <input type="password" class="form-control" id="password" name="password" 
	         placeholder="请输入密码">
	   </div>
	   <div class="form-group">
	      <label for="againPassword">确认密码</label>
	      <input type="password" class="form-control" id="againPassword" name="againPassword"
	         placeholder="请输入一致的密码">
	   </div>
	   
	   <div class="form-group">
	      <label for="againPassword">角色</label>
	      <s:select id="role" name="type" cssClass="form-control" list="#{2:'物业公司人员'}"
	   		headerKey="0" headerValue="业主"
	   	/>
	   </div>
	   
	   <div class="form-group" id="cardID">
	      <label for="regNumber">身份证号</label>
	      <input type="text" class="form-control" id="cId" name="regNumber"
	         placeholder="请输入身份证号">
	   </div>
	   
	   <div class="form-group" id="department" style="display:none"> 
	      <label for="departmentId">所在公司名称</label>
	       <s:select id="dep" name="departmentId" cssClass="form-control"
               list="#departments" listKey="id" listValue="name"
               headerKey="" headerValue="请选择物业公司"
          />
	   </div>
	   
	   <div class="form-group" id="regNum" style="display:none">
	      <label for="regNumber">该物业公司工商注册码</label>
	      <input type="text" class="form-control" id="regNumber" name=""
	         placeholder="请输入工商注册号">
	   </div>
	   
	   
	   <div class="form-group">
	      <label for="photo">电话</label>
	      <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"
	         placeholder="请输入电话">
	   </div>
	   <div class="form-group">
	      <label for="email">邮箱</label>
	      <input type="text" class="form-control" id="email" name="email"
	         placeholder="请输入邮箱地址">
	   </div>
	   <div class="form-group">
	      <label for="inputfile">用户头像</label>
	      <input type="file" name="file"  id="filepicture" data-overwrite-initial="false" data-min-file-count="1" data-max-file-count="1">
	      <p class="help-block">请选择你要上传的头像</p>
	   </div>
	   <button type="submit" class="btn btn-primary">提交</button>
	</form>
	
	</div>
</body>
<script type="text/javascript">
$('#filepicture').fileinput({
    'allowedFileExtensions': ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    showUpload: false, //是否显示上传按钮
    showCaption: true,//是否显示标题
    maxFileSize: 20480,
    minImageWidth: 100, //图片的最小宽度
    minImageHeight: 100,//图片的最小高度
    maxImageWidth: 200,//图片的最大宽度
    maxImageHeight: 200,//图片的最大高度
    browseClass: "btn btn-primary", //按钮样式             
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
});
$(function(){

$("#role").change(function(){
		var role=$("#role").val();
		if(role==0){
			$("#department").css("display","none");
			$("#regNum").css("display","none");
			$("#cardID").css("display","");
			
			$("#cId").attr("name","regNumber");
			$("#regNumber").attr("name","");
		}else{
			$("#department").css("display","");
			$("#regNum").css("display","");
			$("#cardID").css("display","none");
			
			$("#cId").attr("name","");
			$("#regNumber").attr("name","regNumber");
		}
		
})


	$('#forumForm').bootstrapValidator({
		message: 'This value is not valid',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
			},
        fields: {
        	loginName: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {  
                        min: 6,  
                        max: 18,  
                        message: '用户名长度必须在6到18位之间'  
                    },  
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,  
                        message: '用户名只能包含大写、小写、数字和下划线'  
                    } 
                }
            },
            name: {
                validators: {
                    notEmpty: {
                        message: '昵称不能为空'
                    },
                    stringLength: {  
                        max: 20,  
                        message: '昵称长度不能超过20'  
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    }
                }
            },
            againPassword: {
                validators: {
                    notEmpty: {
                        message: '确认密码不能为空'
                    },
                    identical: {//相同
                        field: 'password', //需要进行比较的input name值
                        message: '两次密码不一致'
                    }
                }
            },
            phoneNumber: {
                validators: {
                    notEmpty: {
                        message: '电话不能为空'
                    },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: '请输入11位手机号码'
                    },
                    regexp: {
                        regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                        message: '请输入正确的手机号码'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {  
                        message: '邮箱地址格式有误'  
                    }
                }
            },
            file: {
                validators: {
                    notEmpty: {
                        message: '图片不能为空'
                    }
                }
            }
        }
    }); 
});
</script>
</html>